﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin.pro/css/h-ui.admin.pro.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin.pro/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<!--/meta 作为公共模版分离出去-->

	<title>资讯列表 - 资讯管理 - h-ui.admin.pro v1.0</title>
	<meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
	<meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
	<!--_menu 作为公共模版分离出去-->
	<aside class="Hui-admin-aside-wrapper">
		<div class="Hui-admin-logo-wrapper">
			<a class="logo navbar-logo" href="/aboutHui.shtml">
				<i class="va-m iconpic global-logo"></i>
				<span class="va-m">H-ui.admin</span>
			</a>
		</div>
		<div class="Hui-admin-menu-dropdown bk_2">
			<ul class="Hui-menu"></ul>
		</div>
	</aside>
	<div class="Hui-admin-aside-mask"></div>
	<div class="Hui-admin-dislpayArrow">
		<a href="javascript:void(0);" onClick="displaynavbar(this)">
			<i class="Hui-iconfont Hui-iconfont-left">&#xe6d4;</i>
		</a>
	</div>
	<!--/_menu 作为公共模版分离出去-->


	<section class="Hui-admin-article-wrapper">
		<!--_header 作为公共模版分离出去-->
		<header class="Hui-navbar">
			<div class="navbar">
				<div class="container-fluid clearfix">
          <nav id="Hui-topNav" class="nav navbar-nav f-l">
            <ul class="clearfix">
              <li><a href="">顶部菜单</a></li>
              <li class="dropDown dropDown_hover">
                <a class="dropDown_A" href="javascript:;">顶部菜单</a>
                <ul class="dropDown-menu menu radius box-shadow">
                  <li class="">
                    <a href="#">二级导航</a>
                  </li>
                  <li class="">
                    <a href="#">二级导航</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
          <!-- <div class="f-l" style="padding-top: 17px;">
            日期范围
            <input type="text" id="search-datetime-start" class="input-text datetimepicker-input" style="width:120px;">
            -
            <input type="text" id="search-datetime-end" class="input-text datetimepicker-input" style="width:120px;">
            <input type="text" name="" id="" placeholder=" 图片名称" style="width:200px" class="input-text">
            <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜图片</button>
          </div> -->
					<nav id="Hui-userbar" class="nav navbar-nav navbar-userbar">
						<ul class="clearfix">
							<li>超级管理员</li>
							<li class="dropDown dropDown_hover right">
								<a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
								<ul class="dropDown-menu menu radius box-shadow">
									<li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
									<li><a href="#">切换账户</a></li>
									<li><a href="#">退出</a></li>
								</ul>
							</li>
							<li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a> </li>
							<li id="Hui-skin" class="dropDown dropDown_hover right">
								<a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
								<ul class="dropDown-menu menu radius box-shadow">
									<li><a href="javascript:;" data-val="default" title="默认（蓝色）">默认（深蓝）</a></li>
									
									<li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
									<li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
									<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
									<li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
								</ul>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</header>
		<!--/_header 作为公共模版分离出去-->


		<div class="Hui-admin-article">
			<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
				首页
				<span class="c-gray en">/</span>
				报修管理
				<span class="c-gray en">/</span>
				我的报修
			</nav>

			<article class="Hui-admin-content clearfix">
				<div class="panel">
					<div class="panel-body">
						<div class="row clearfix">
							<div class="col-xs-12 col-sm-6 col-md-4">
								<div class="row clearfix mb-10">
									<span class="col-xs-4 form-item-label">选择分类：</span>
									<span class="col-xs-8 form-item-control">
										<span class="select-box">
											<select id="classifyID" name="" class="select">
												<option value="0">全部分类</option>
												<option value="1">分类一</option>
												<option value="2">分类二</option>
											</select>
										</span>
									</span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-4">
								<div class="row clearfix mb-10">
									<span class="col-xs-4 form-item-label">开始日期：</span>
									<span class="col-xs-8 form-item-control">
										<input type="text" id="search-datetime-start" class="input-text datetimepicker-input">
									</span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-4">
								<div class="row clearfix mb-10">
									<span class="col-xs-4 form-item-label">结束日期：</span>
									<span class="col-xs-8 form-item-control">
										<input type="text" id="search-datetime-end" class="input-text datetimepicker-input">
									</span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-4">
								<div class="row clearfix mb-10">
									<span class="col-xs-4 form-item-label">标题名称：</span>
									<span class="col-xs-8 form-item-control">
										<input type="text" name="searchInput" id="search-input" placeholder=" 资讯名称" class="input-text" />
									</span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-4">
								<div class="row clearfix">
									<span class="col-xs-4 form-item-control">
										<button name="" id="search-submit" class="btn btn-success radius" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜资讯</button>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="panel mt-20">
					<div class="panel-body">
						<div class="clearfix">
							<span class="f-l">
								<button class="btn btn-primary radius" onclick="article_add('添加资讯','article-add.html')" ><i class="Hui-iconfont">&#xe600;</i> 添加资讯</button>
								<button onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</button>
							
							</span>
							<span class="f-r">共有数据：<strong id="totalNum"></strong> 条</span>
						</div>

						<div class="mt-20 clearfix">
							<table id="data-table-list" class="table table-border table-bordered table-bg table-hover table-sort">
								<thead>
									<tr class="text-c">
										<th width="25"><input type="checkbox" name="" value="all"></th>
										<th width="80">ID</th>
										<th>标题</th>
										<th width="80">分类</th>
										<th width="80">来源</th>
										<th width="120">更新时间</th>
										<th width="75">浏览次数</th>
										<th width="60">发布状态</th>
										<th width="120">操作</th>
									</tr>
								</thead>
								<tbody class="getData-list" data-currPage='1'></tbody>
							</table>
						</div>
						<div id="laypage" class="text-c"></div>
					</div>
				</div>
			</article>
		</div>
	</section>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
	<script type="text/javascript" src="static/h-ui.admin.pro/js/h-ui.admin.pro.js"></script>
	<!--/_footer /作为公共模版分离出去-->
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="static/business/js/main.js"></script>
	<!--/请在上方写此页面业务相关的脚本-->
	<script type="text/javascript">

		/* =====所有的列表页都可照搬这套模式====== */

		// 封装一个获取数据列表的方法，将条件封装到options对象中
		function getDataList(options){
			console.log(options);

			$.ajax({
				url: 'article-list.html',// 跳转到 action, 换成自己的接口
				data: options,
				type: 'get',
				cache: false,
				dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
				success: function(respData) {

					var students ={
						result: ture, // 返回状态
						msg: '',		// 返回信息
						pagination: { // 翻页数据
							currPage: 1,// 当前第几页
							total: 100, //数据总数
							pageSize: 10,  // 每页条数
						},
						datas:[
							{'id':1001,'stuName':'张三','age':19},
							{'id':1002,'stuName':'李四','age':20},
							{'id':1003,'stuName':'张三','王五':21},
						]
					}

					/* 大概的数据结构
						respData: {
							result: ture, // 返回状态
							msg: '',		// 返回信息
							pagination: { // 翻页数据
								currPage: 1,// 当前第几页
								total: 100, //数据总数
								pageSize: 10,  // 每页条数
							},

							datas: [    // 详细数据
								{
									id: '',  // id
									title: '', // 标题
									classify: [  // 分类 允许属于多个分类
										{
											id: '',				// 分类id
											name: '',     // 分类名称
										},
										……
									],
									source: { // 来源
										id: '', // 来源id
										name: '', // 来源名称
									},
									updateTime: '', // 更新时间
									viewsNo: '', // 浏览次数
									status: {  // 各种状态
										examine: '',  // 审核状态
										manage: {     // 管理状态
											canPublish: 0, // 能否发布
											canEdit: 0,  // 能否编辑
											canDel: 0,   // 能否删除
										}
									}
								},
								……
							],
						}
					*/
					if(respData.result){ // 请求正确 返回true, 也指200状态
						var data = respData.datas; // 返回的数据
						var htmlstr = '';
						if(data.length > 0 ) {
							// 只有获取的数据对象长度大于0，我们才做for循环处理。
							for(var i = 0;i< data.length;i++){ // for循环将json数据拼接成html结构。 此处可以用模板引擎。
								htmlstr +=
								'<tr>'+
									'<td><input type="checkbox" value="" name=""></td>'+
									'<td>'+ data[i].id +'</td>'+
									'<td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="article_edit(\'查看\',\'article-zhang.html\',\'+data[i].id+\')" title="查看">'+ data[i].title +'</u></td>'+
									'<td data-id="'+data[i].classify.id+'">'+ data[i].classify.name +'</td>'+
									'<td data-id="'+data[i].source.id+'">'+data[i].source.name+'</td>'+
									'<td>'+data[i].updateTime+'</td>'+
									'<td>'+data[i].viewsNo+'</td>';

									// data[i].status.examine 审核状态(字符串) '0'为草稿，'1'为审核中，'2'通过，'3'为未通过，'4'为发布，'5'为下架
									if(data[i].status.examine == '0'){
										htmlstr += '<td class="td-status"><span class="label label-default radius">草稿</span></td>';
									}
									if(data[i].status.examine == '1'){
										htmlstr += '<td class="td-status"><span class="label label-primary radius">审核中</span></td>';
									}
									if(data[i].status.examine == '2'){
										htmlstr += '<td class="td-status"><span class="label label-primary radius">通过，待发布</span></td>';
									}
									if(data[i].status.examine == '3'){
										htmlstr += '<td class="td-status"><span class="label label-danger radius">未通过</span></td>';
									}
									if(data[i].status.examine == '4'){
										htmlstr += '<td class="td-status"><span class="label label-success radius">已发布</span></td>';
									}
									if(data[i].status.examine == '5'){
										htmlstr += '<td class="td-status"><span class="label label-danger radius">已下架</span></td>';
									}

									htmlstr += '<td class="f-14 td-manage">';
									// data[i].status.manage 管理状态集合（子对象为布尔值）  canPublish 能否发布  canEdit 能否编辑 canDel能否删除
										if(data[i].status.examine == '4' && data[i].status.manage.canPublish){
											htmlstr += '<a style="text-decoration:none" onClick="article_stop(this,\'+ data[i].id +\')" href="javascript:;" title="下架">下架</a>';
										}
										if((data[i].status.examine == '2' || data[i].status.examine == '5') && data[i].status.manage.canPublish){
											htmlstr += '<a style="text-decoration:none" onClick="article_start(this,\'+ data[i].id +\')" href="javascript:;" title="发布">发布</a>';
										}
										if(data[i].status.manage.canEdit){
											htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="article_edit(\'资讯编辑\',\'article-add.html\',\'+ data[i].id +\')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>';
										}
										if(data[i].status.manage.canDel){
											htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="article_del(this,\'+ data[i].id +\')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>';
										}
									htmlstr += '</td>'+
								'</tr>';
							}
							// 在页面对应<tbody class=".getData-list">标签中输出拼接好的html结构。
							$(".getData-list").html(htmlstr);

							// 渲染分页
							laypage({
						    cont: 'laypage',    //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="laypage">&lt;/div>
						    pages: Math.ceil(respData.pagination.total/respData.pagination.pageSize),  // 除法运算，向上取整
						    curr: currPage,    //初始化当前页
						    hash: 'page',
						    limits: [10, 25, 50, 100],
						    first: '首页',
						    last: '尾页',
						    prev: '<em>&lt;&lt;</em>',
						    next: '<em>&gt;&gt;</em>',
						    jump: function(e, first){ //触发分页后的回调
									console.log(e);
						      if(!first) {
										$(".getData-list").attr("data-currPage", e.curr);
										runGetDataList();
						      }
						    }
						  });
						}else {
							console.log(respData.msg); // 返回正确状态，但是没有数据，在此处处理。
							var tdNum = $("#data-table-list thead tr td").length;
							htmlstr = '<tr><td colspan="'+tdNum+'" class="data-null">数据为空</td></tr>';
							$(".getData-list").html(htmlstr);
						}
						$("#totalNum").html(respData.pagination.total);
					}else {
						$("#totalNum").html('0');
						console.log(respData.msg);  // 返回错误状态，通常指网络请求失败、后台报错等，最好后台给出错误提示，方便前台调试。也可定义几种返回的错误状态码，如201 203 400 404 500 503等。
					}
				},
				error: function(respData){ // ajax的error状态
					console.log(respData);
				}
			});
		}

		// 运行获取数据列表这个方法，这里面可以灵活自定义要传递的参数
		function runGetDataList(){
			getDataList({
				classifyID : $("#classifyID").val() || 0, // 分类id
				currPage : $(".getData-list").attr("data-currPage") || 1, // 当前第几页
				pageSize: 10, // 每页几条
				datetimeStart : $("#search-datetime-start").val() || '',
				datatimeEnd : $("#search-datetime-end").val() || '',
				keywords : $("#search-input").val() || '',
			});
		}

		$(function(){
			getMenu();

			runDatetimePicker(); // 实例化日期控件

			runGetDataList(); // 页面载入，自执行加载数据...
			// 点击搜索执行...
			$("#search-submit").on("click",function(){
				// runGetDataList();
			});

			// 全选
			$("#data-table-list").HuicheckAll(
				{
					checkboxAll: 'thead input[type="checkbox"]',  // 表头全选的checkbox
					checkbox: 'tbody input[type="checkbox"]' // 列表开头的checkbox
				},
				function(checkedInfo) {
					console.log(checkedInfo); // checkedInfo 就是选择后返回的参数，请根据自己的业务接口进行二次加工。
				}
			)
		});
	</script>
</body>
</html>
